<template>
  <div class="main">
        <div class="content">
          <!-- 顶部的第一本书 -->
          <h2 v-html="content.title"></h2>
          <div class="top">
                <div class="image" @click="imgClick(content.name)">

                   <router-link :to="{path:`/chapter${content.href}`}">
                     <img :src="content.imghref" alt="">
                   </router-link>

                </div>
                <dl>
                  <dt>{{content.name}}</dt>
                  <dd>
                   {{content.abstract}}
                  </dd>
                </dl>
          </div>

          <ul>
            <li v-for="(item,index) in classification" :key="index">
              <a @click="NameClick(item.author.split('/')[0],item.href)">{{item.author.split('/')[0]}}</a>
            /{{item.author.split('/')[1]}}
            </li>
          </ul>
        </div>
  </div>
</template>
<script>
export default {
  name: 'ClassiFication',
  props: ['content', 'classification'],
  methods: {
    imgClick (name) {
      this.$store.commit('SETNAME', name)
    },
    NameClick (name, href) {
      this.$store.commit('SETNAME', name)
      this.$router.push(`/chapter${href}`)
    }
  }
}
</script>
<style lang="less" scoped>
.main{
 background-color: #FEF9EF;
 border-right: 1px dotted #A6D3E8;;
}
  img{
    width: 67px;
    height: 82px;
  }
  .content{
    width: 315px;
    margin: 0;
   h2{
     border-bottom: solid 1px #A6D3E8;
     font-size: 14px;
     font-weight: bold;
    padding-left: 5px;
    line-height: 25px;
    height: 25px;
    overflow: hidden;
    margin: 0;
   }
  }
.top{
  display: flex;
  padding-top: 10px;
  // .image{
  //   flex: 1;
  // }
  dl{
    margin-left: 15px;
    flex: 1;
    dt{
      margin-bottom: 10px;
    }
  }
  dd{
    height: 60px;
    overflow: hidden;
    line-height: 20px;
  }
}
ul{
  padding: 0;
// display: flex;
// flex-direction: column;
  list-style: none;
  li{
  // flex: 0.5;
    overflow: hidden;
    float: left;
    width: 155px;
    font-size: 12px;
    border-bottom: solid 1px #DDDDDD;;
    // margin-top: 10px;
    height: 20px;
    line-height: 20px;
    color:#B3B3B3;
    a{
      cursor: pointer;
      text-decoration: none;
      color: #6F78A7;
    }
    a:hover{
      transition: 1s;
      background-color: pink;
    }
  }
}
</style>
